<template>
  <div>
    <div class="content-header">
      <h1>
        预约管理
        <small>预约设置</small>
      </h1>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>预约管理</el-breadcrumb-item>
        <el-breadcrumb-item>预约设置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="app-container">
      <div class="box">
        <div class="ordersetting">
          <el-card class="box-card">
            <div class="boxMain">
              <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary" @click="downloadTemplate">模板下载</el-button>
              <el-upload
                action="api/ordersetting/importOrderSettings"
                name="excelFile"
                :before-upload="beforeAvatarUpload"
                :on-success="handleSuccess"
                :show-file-list="false"
              >
                <el-button type="primary">上传文件</el-button>
              </el-upload>
            </div>
            <div>
              操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据
              <span style="color: red">(日期格式为：yyyy/MM/dd)</span>后点击"上传文件"按钮上传模板文件。
            </div>
          </el-card>
          <el-calendar v-model="curday">
            <template
              slot="dateCell"
              slot-scope="{date, data}">
              <div v-if="settingData[data.day]">
                <div v-if="settingData[data.day].number == settingData[data.day].reservations" 
                  style="background-color:red;height:85px;">
                 <div><font color='blue'>{{data.day}}</font></div>
                  <div>{{settingData[data.day].reservations}}/{{settingData[data.day].number}}</div>
                  <div>已满</div>
                </div>
                <div v-else style="background-color:lightblue;height:85px;">
                  <div><font color='blue'>{{data.day}}</font></div>
                  <div>{{settingData[data.day].reservations}}/{{settingData[data.day].number}}</div>
                  <div><button
                   @click="goSetting(data.day)"><i class="el-icon-setting"></i>设置</button></div>
                </div>
              </div>
              <div v-else>
                <div v-if="data.type == 'current-month'" style="padding-top:25px;">
                    <font color='blue'>{{data.day}}</font>
                    <button @click="goSetting(data.day)"><i class="el-icon-setting"></i>设置</button>
                </div>
                <div v-else style="background-color:rgb(192,196,204);height:85px;width100%;">
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
    </div>
     <el-dialog title="预约设置" :visible.sync="settingDialog" width="30%" top="15%">
       <div>日期:{{settingDay}}</div>
       <el-input v-model="number" placeholder="输入预约总人数"></el-input>
       <div slot="footer" class="dialog-footer">
        <el-button @click="settingDialog = false">取消</el-button>
        <el-button type="primary" @click="handleUpdate">确定</el-button>
      </div>
     </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      curday: new Date(),
      settingData:{}, // 日历需要填充的数据：{"2020-11-11" : {number:200,reservations:200}}
      settingDay:'', // 设置某个人数的日期
      settingDialog:false, // 是否显示设置界面
      number:'', // 设置的预约人数
    };
  },
  methods:{
    // 下载模板
    downloadTemplate:function(){
      // window.open(url,target) ：打开下载工程resources/static/下的文件
      // target：_blank新窗口；_parent本窗口；_self替换当前页面
      // 下载resources/static/template/ordersetting_template.xlsx
      window.open('api/template/ordersetting_template.xlsx','_parent');
    },

    // 上传前的文件校验
    beforeAvatarUpload(file) {
      /**
       * 判断类型是不是xlsx类型文件
       * type === MIME类型：可以从tomcat的web.xml配置中搜索
       */
      const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isXlsx) {
        this.$message.error('必须上传xlsx文件');
      }
      // 返回结果为true才进行文件的上传
      return isXlsx;
    },

    // 上传文件的响应信息
    handleSuccess(response) {
      if(response.flag){
        this.$message.success("文件上传成功！");
      }else{
        this.$message.error(response.message);
      }
    },

    // 查询当月数据
    findSettingData(year,month){
      this.$http.get("api/ordersetting/findSettingData/"+year+"/"+month).then((res)=>{
        if(res.data.flag){
          this.settingData = res.data.data
          this.$message.success(res.data.message)
        }else{
          this.$message.error(res.data.message)
        }
      })
    },

    //后台数据加载
    loadData:function(){
    // this.curday 双向绑定 当前最新的日期
      console.log('最新日期',this.curday);
      this.findSettingData(this.curday.getFullYear(),this.curday.getMonth()+1)
    },

    // 点击设置将当前日期赋值给settingDay，打开设置面板
    goSetting:function(day){
        this.settingDay = day;
        this.settingDialog = true;
    },

    handleUpdate(){
      // 正则表达式    new  Regxx
      var reg=/^[0-9]*[1-9][0-9]*$/
      var flag =  reg.test(this.number) //  test方法 进行 数据合法校验
      if(flag){
        //  判断用户输入值 是否 大于 已经预约数   如果输入数值 小于  已经预约数据  不需要访问后台 报错
        /**
         * 已经预约数在查询当前月的数据时已经查到：{"2020-11-11" : {number:200,reservations:200}}
         * {"this.settingDay" : {number:200,reservations:200}}
         * 获取格式：settingData[this.settingDay].reservations
         */
        if(this.number<this.settingData[this.settingDay].reservations){
            this.$message.error("输入数据必须大于已经预约数据！");
            return
        }
        // 合法 提交数据给后台   修改
          this.$http.put("api/ordersetting/updateNumberByOrderdate/"+this.number+"/"+this.settingDay).then((res)=>{
            if(res.data.flag){
              // 更新设置数据（无需查询数据库）
              this.settingData[this.settingDay].number = this.number
              this.settingDialog = false
            }else{
              this.$message.error(res.data.message)
            }
          })

      }else{
        this.$message.error("数据非法!");
      }
    }
    
    
    
    
  },

  // vue周期函数，data中的指定数据发生变化时触发
  watch:{
    // 监听 当前 日期的变化：curday，oldDate：老数据，newDate：新数据
    curday:function(oldDate,newDate){
      // 判断如果日期变化后，不是相同月份就触发后台数据加载
      if(oldDate.getMonth() != newDate.getMonth()){
        this.loadData();
      }
    }
  },
  created(){
    /*
    this.settingData = {
      "2020-09-01":{number:200,reservations:200},
      "2020-09-02":{number:200,reservations:200},
      "2020-09-05":{number:200,reservations:100},
      "2020-09-15":{number:200,reservations:50},
      "2020-09-28":{number:100,reservations:90}
    }
    */

    // 查询当月数据this.curday
    this.findSettingData(this.curday.getFullYear(),this.curday.getMonth()+1)

  }
};
</script>

<style scoped>
.el-calendar-table .el-calendar-day{
  padding: 0;
}
</style>
